<!--
 * @author: 十一
 * @since: 2024-06-19
 * Header.vue
 * @desc: new page
-->
<template>
  <div class="mt-5 mb-5 flex items-center" v-if="!isMobile">
    <div class="font-medium text-xl cursor-pointer flex items-center justify-center">
      <div
        @click="
          () => {
            router.push('/')
          }
        "
        class="mr-5"
      >
        首页
      </div>
      <div
        class="resource"
        @click="
          () => {
            router.push('/resource')
          }
        "
      >
        资源库
      </div>
    </div>
    <div
      class="cursor-pointer text-sm flex items-center justify-center text-gray-400 heander-hover"
      style="margin-left: 40px"
    >
      <span class="mr-10"
        ><a target="_blank" href="http://remove-watermark.ziyoujike.cn/"> 图片去水印 </a></span
      >
      <span
        class="mr-10"
        @click="
          () => {
            router.push('/calculator')
          }
        "
        >计算器</span
      >
      <span
        class="mr-10"
        @click="
          () => {
            router.push('/color-library')
          }
        "
        >颜色库</span
      >

      <a class="mr-10" target="_blank" href="https://work.weixin.qq.com/kfid/kfc2dce92f6526add6d"
        >联系客服</a
      >
    </div>
  </div>
  <div v-if="isMobile">
    <div class="flex justify-between items-center mt-5 mb-5 pl-5 pr-5">
      <span
        @click="
          () => {
            router.push('/')
          }
        "
        >首页</span
      >
      <span
        @click="
          () => {
            router.push('/resource')
          }
        "
      >
        资源库
      </span>
      <span
        @click="
          () => {
            router.push('/calculator')
          }
        "
        >计算器</span
      >
      <span
        @click="
          () => {
            router.push('/color-library')
          }
        "
        >颜色库</span
      >
      <span v-if="!userStore.token">
        <span @click="handleRegister">注册</span>
        <a-divider type="vertical"></a-divider>
        <span @click="handleLogin">登录</span>
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useUserStore from '@/stores/user'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'

let router = useRouter()
const registerModelRefs = ref()
const loginModelRefs = ref()
const userStore = useUserStore()
let isMobile = ref(false)

onMounted(() => {
  window.addEventListener('resize', () => {
    isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    )
  })
})

const handleRegister = () => {
  registerModelRefs.value.showModal()
}
const handleLogin = () => {
  loginModelRefs.value.showModal()
}
</script>

<style lang="less" scoped>
.resource {
  padding: 0px 30px;
  font-size: 12px;
  border-radius: 100px;
  background-color: #dee2e8;
  animation: resource 3s infinite ease-in-out;
  color: rgb(85, 88, 93);
}
.resource:hover {
  background-image: linear-gradient(to right, #00fffe, #97ff7d);
  color: #000000;
  transition: 2s;
}
@keyframes resource {
  0% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}
.heander-hover span:hover {
  color: #000000;
}
</style>
